<template>
  <div class="task-management">
    <div class="task-search">
      <div class="search-title">
        任务查询
      </div>
      <div class="search-content">
        <div class="search-list">
          <ui-form :model="ruleForm" rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <ui-form-item>
              <ui-row type="flex" class="row-bg" justify="space-around">
                <ui-col :span="8">
                  <ui-form-item label="任务名称" prop="taskname">
                    <ui-input v-model="ruleForm.name"></ui-input>
                  </ui-form-item>
                </ui-col>
                <ui-col :span="8">
                  <ui-form-item label="任务类型" prop="tasktype">
                    <ui-select v-model="ruleForm.type" placeholder="请选择活动区域">
                      <ui-option label="区域一" value="shanghai"></ui-option>
                      <ui-option label="区域二" value="beijing"></ui-option>
                    </ui-select>
                  </ui-form-item>
                </ui-col>
              </ui-row>
            </ui-form-item>
            <ui-form-item>
              <ui-row type="flex" class="row-bg" justify="space-around">
                <ui-col :span="8">
                  <ui-form-item label="任务名称" prop="taskname">
                    <ui-select v-model="ruleForm.type" placeholder="请选择活动区域">
                      <ui-option label="区域一" value="shanghai"></ui-option>
                      <ui-option label="区域二" value="beijing"></ui-option>
                    </ui-select>
                  </ui-form-item>
                </ui-col>
                <ui-col :span="8">
                  <ui-form-item label="任务类型" prop="tasktype">
                    <ui-select v-model="ruleForm.type" placeholder="请选择活动区域">
                      <ui-option label="区域一" value="shanghai"></ui-option>
                      <ui-option label="区域二" value="beijing"></ui-option>
                    </ui-select>
                  </ui-form-item>
                </ui-col>
              </ui-row>
            </ui-form-item>
            <ui-form-item>
              <ui-row type="flex" class="row-bg" justify="center">
                <ui-button type="primary" @click="submitForm('ruleForm')">立即创建</ui-button>
                <ui-button @click="resetForm('ruleForm')">重置</ui-button>
              </ui-row>
            </ui-form-item>
          </ui-form>
        </div>
      </div>
    </div>
    <div class="task-list">
      <div class="task-list-operation">
        <div class="operation-title">任务列表</div>
        <div class="operation-btns">
          <ui-button size="small" @click="goPage('creation')">创建</ui-button>
          <ui-button size="small">修改</ui-button>
          <ui-button size="small">删除</ui-button>
          <ui-button size="small">分配</ui-button>
          <ui-button size="small">收回</ui-button>
        </div>
      </div>
      <div class="task-list-tabble">
        <vx-table :table-data="tableData" :is-select="true" :buttom-group="buttomGroup" :columns="columns"></vx-table>
        <!-- <ui-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" stripe>
          <ui-table-column width="60" label="选择">
            <template slot-scope="scope">
              <ui-radio v-model="userId" :label="scope.row.userId" @change="handleRowChange(scope.row)">{{""}}</ui-radio>
            </template>
          </ui-table-column>
          <ui-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </ui-table-column>
          <ui-table-column prop="name" label="姓名" width="120"> </ui-table-column>
          <ui-table-column prop="address" label="地址" show-overflow-tooltip> </ui-table-column>
        </ui-table> -->
      </div>
    </div>
  </div>
</template>

<script>
import { wordcut } from '@csii/vx-util';
import vxTable from '@/components/vx-table';
export default {
  name:'taskManagement',
  components: {
    vxTable,
  },
  data() {
    return {
      ruleForm: {},
      userId: '',
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '17',
          no: '1',
          phnoe: '12111111111',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '17',
          no: '1',
          phnoe: '12111111111',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '17',
          no: '1',
          phnoe: '12111111111',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '17',
          no: '1',
          phnoe: '12111111111',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '17',
          no: '1',
          phnoe: '12111111111',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '17',
          no: '1',
          phnoe: '12111111111',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '17',
          no: '1',
          phnoe: '12111111111',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      columns: [
        { prop: 'date', label: '日期', width: '120' },
        { prop: 'name', label: '姓名', width: '120' },
        { prop: 'age', label: '年龄', width: '120' },
        { prop: 'no', label: '员工号', width: '120' },
        {
          prop: 'phnoe',
          label: '电话',
          width: '120',
          formatter: (row, column, cellValue, index) => {
            return wordcut(cellValue, 3, 4);
          },
        },
        { prop: 'address', label: '地址', width: '120' },
      ],
      // 操作按钮
      buttomGroup: [
        { label: '删除', methodsName: 'delete' },
        { label: '修改', methodsName: 'updataData' },
      ],
    };
  },
  methods: {
    handleRowChange(val) {
      console.log(this.userId, 'userId');
      console.log(val, 'val');
    },
    // 任务列表操作
    goPage(item) {
      console.log(1);
      switch (item) {
        case 'creation':
          this.$router.push('/task/taskCreation');
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.task-management {
  box-sizing: border-box;
  width: 100%;
  .task-search {
    border: 1px solid #ccc;
    .search-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      padding: 20px;
      border-bottom: 1px solid #ccc;
    }
    .search-content {
      padding: 20px 30px;
    }
  }
  .task-list {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    .task-list-operation {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 20px;
      .operation-title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
      }
      .operation-btns {
        display: flex;
      }
    }
    .task-list-tabble {
      padding: 0 15px;
    }
  }
}
::v-deep .ui-select {
  display: block;
}
</style>
